<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // //对一个不定层级的嵌套对象进行代理
    let obj = {
      username: "zs",
      age: 18,
      count: {
        math: 90
      },
      arr:[1,2,3]
    }

    // //封装函数对obj的属性进行属性代理
    // let myProxy = (obj) => {
    //   let keyArr = Object.keys(obj)//拿到键名
    //   for (let i = 0; i < keyArr.length; i++) {
    //     //传入定义的对象，键名,和值
    //     proxyAttr(obj, keyArr[i], obj[keyArr[i]])
    //   }
    // }

    // function proxyAttr(objs, key, value) {
    //   //判断值是不是object是的话递归
    //   if (typeof value === 'object') {
    //     myProxy(value)
    //   }
    //   //设置属性的元信息,这里Reflect和Object差不多
    //   Reflect.defineProperty(objs, key, {
    //     get() {
    //       //获取值值时触发
    //       return value
    //     },
    //     set(newValue) {
    //       // 设置值时触发
    //       if (value === newValue) {
    //         //如果更改的新值与旧值相同那么就直接返回不更改
    //         return
    //       }
    //       value = newValue
    //     }
    //   })

    // }
    //传入对象,设置代理
    // myProxy(obj);
    //设置值
    // obj.age = 19;
    // 实例化拦截器,设置拦截
    let newObj = new Proxy(obj, {
      get(target, key) {
        //判断如果是一个数组
        if(target[key] instanceof Array){
          return new Proxy(target[key],{
            get(target, key, receiver){
              console.log(target, key, receiver);
              return Reflect.get(target, key, receiver)
            },
            set(target, key, value, receiver){
              console.log(target, key, receiver);
              return Reflect.set(target, key, value, receiver)
            }
          });
        }
        //接受两个参数
        console.log('你在获取值', key, target);
        return target[key]
      },
      set(target, key, value) {
        //三个参数
        console.log(value, '你在设置值');
        target[key] = value
      }
    })
    newObj.arr.push(4);
  </script>
</body>

</html>